import React, { useState,useEffect } from 'react';
import { Modal, Button,Form,Input,Radio } from 'antd';
// import ModalForm from './modalForm';
const Add = () => {
    const [visible,setVisible] = useState(false);
    const [value,setValue] = useState('1');
    const [confirmLoading,setConfirmLoading] = useState(false);
    // const [modalText,setModalText] = useState('Content of the modal');
    const {TextArea} = Input;
    const showModal = () => {
        setVisible(true);
    }
    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setVisible(false);
            setConfirmLoading(false);
        }, 2000);
    };
    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    }
    const limitsOnChange = e => {
        console.log('Radio Checked');
        setValue(e.target.value);
    };
    return (
    <>
      <Button type="primary" onClick={showModal}>
        添加报警信息
      </Button>
      <Modal
        title="添加报警信息"
        visible={visible}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={[
            <Button key="back" onClick={handleCancel}>取消</Button>,
            <Button key="submit" type="primary"  onClick={handleOk}>提交</Button>
        ]}
      >
        <Form>
            <Form.Item
            label="设备"
            name="device"
            rules={[{required:true}]}
            >
                <Input placeholder="输入设备名" />
            </Form.Item>
            <Form.Item
            label="报警信息"
            name="message"
            rules={[{required:true}]}
            >
                <TextArea  placeholder="输入报警信息" rows={8} />
            </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default Add;
